<template>
  <div>
    <div class="goodsBar widthFull">
      <div
        :class="selectNav==index?'active':'item'"
        v-for="(item,index) in nav"
        :key="index"
        @click="select(index)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="view-content" v-if="selectNav==0">
      <!--主图轮播-->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img :src="goods.pic" /></div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="title-bar">
        <h4 class="goods-title">{{ goods.name }}</h4>
        <span class="goods-price">¥{{ goodsPrice }}</span>
        <p class="keyword">{{ goods.description }}</p>
      </div>
      <div class="parameter-bar">
        <div class="sortItem">
          <span>规格属性</span>
          <ul>
            <li
              v-for="(detail,detailIndex) in goods.detailList"
              :key="detailIndex"
            >
              {{ detail.specname }}
            </li>
          </ul>
        </div>
      </div>
      <div class="remarks-bar">
        <div class="remarks-box">
          <span>运费:</span> <span class="postage-text">免运费</span>
        </div>
        <div class="remarks-box">
          <span>商家:</span>
          <span class="postage-text">蓝之蓝股份有限公司</span>
        </div>
        <div class="remarks-box">
          <span>提示:</span>
          <span class="postage-text">支持7天无理由退换货</span>
        </div>
      </div>
    </div>
    <div class="view-content" v-if="selectNav==1">
      <img :src="goods.pic" />
      <!-- <img :src=url v-for="(url,index) in goods.pic" :key="index" /> -->
    </div>
    <div class="view-content" v-if="selectNav==2">
      <div class="evaluate-box">
        <div class="user-evaluate">
          <div class="user-icon"><img :src="userIcon" /></div>
          <div class="user-name">{{ name }}</div>
          <div class="evaluate-time">{{ time }}</div>
        </div>
        <div class="comment-item-star"><span class="real-star"></span></div>
        <div class="evaluate-text">面料不错，码数也正常 男朋友穿的很合适。</div>
        <div class="comment-img">
          <img :src="goods.pic" />
          <!-- <img
            :src="commentImg"
            v-for="(commentImg,index) in commentImgList"
            :key="index"
          /> -->
        </div>
      </div>
    </div>
    <div class="footBar widthFull">
      <div class="home" @click="to('home')">
        <img class="img-foot" src="../assets/index/navBarHome.png" />
        <p>首页</p>
      </div>
      <div class="cart" @click="to('car')">
        <img class="img-foot" src="../assets/goodsbar/car.png" />
        <p>购物车</p>
      </div>
      <button class="add-to-cart" @click="setMask(1)">加入购物车</button>
      <div class="buy-now" @click="setMask(2)">立即购买</div>
    </div>
    <div v-show="mask" class="mask">
      <div class="dialog">
        <div class="dialog-head">
          <div><img :src="goods.pic" /></div>
          <div class="dialog-title">
            <span>{{ goods.name }}</span>
            <span class="goods-price">¥{{ goods.detailList[spec].price }}</span>
          </div>
        </div>
        <div class="sortItem">
          <span>规格属性(请选择)：</span>
          <ul>
            <li
              v-for="(detail,detailIndex) in goods.detailList"
              :class="spec==detailIndex?'activeSpec':''"
              :key="detailIndex"
              @click="specSelect(detailIndex)"
            >
              {{ detail.specname }}
            </li>
          </ul>
        </div>
        <div class="sortItem">
          <span>购买数量:</span> <inputNumber class="inputNumber"></inputNumber
          ><span class="stock">库存：999</span>
        </div>
        <button
          v-if="or==1"
          class="for-to"
          style="background-color: #ffc107"
          @click="setMaskShow"
        >
          加入购物车
        </button>
        <button
          v-if="or==2"
          class="for-to"
          style="background-color: #e21323"
          @click="to('pay')"
        >
          立即付款
        </button>
        <button
          class="for-to"
          style="background-color: #777"
          @click="setMaskShow"
        >
          取消
        </button>
      </div>
    </div>
  </div>
</template>
<style scoped>
  @import "../css/style.css";
  .swiper-slide img {
    width: 100%;
  }
</style>
<style scoped>
  @import "../css/style.css";
  .goodsBar {
    top: 0;
    height: 2.6rem;
    background: linear-gradient(to bottom, #fff 0%, #efefef 100%);
    line-height: 2.6rem;
    color: #888;
    font-size: 0.937rem;
    display: flex;
    justify-content: space-around;
  }
  .icon-back {
    width: 1.4rem;
    margin-top: 0.6rem;
  }
  .item,
  .active {
    display: block;
    width: 33%;
  }
  .active {
    color: #e21323;
    font-weight: bold;
    background-color: inherit;
  }
  .active:before {
    content: "";
    width: 34px;
    height: 3px;
    background: #e21323;
    position: absolute;
    bottom: 0;
  }
  .title-bar {
    background: #fff;
    padding: 0.75rem 0.625rem;
    border-top: 0.0625rem solid #e1e1e1;
    border-bottom: 0.0625rem solid #e1e1e1;
    text-align: left;
  }
  .goods-title {
    font-size: 0.875rem;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5;
  }
  .goods-price {
    color: #e21323;
    line-height: 1.25rem;
    font-weight: bold;
    font-size: 1.25rem;
    display: block;
    padding: 0.36rem 0;
  }
  .keyword {
    line-height: 1.4rem;
    color: #454545;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .parameter-bar {
    margin: 0.625rem 0;
    background: #fff;
    padding: 0.3125rem 0.625rem;
    border-top: 0.0625rem solid #e1e1e1;
    border-bottom: 0.0625rem solid #e1e1e1;
  }
  .sortItem {
    display: flex;
    flex-direction: column;
    border-bottom: 0.01rem solid #e1e1e1;
  }
  .sortItem span {
    margin-right: 0.625rem;
    font-size: 0.8125rem;
    color: #212121;
    white-space: nowrap;
    text-align: left;
  }
  .sortItem li {
    float: left;
    border: 0.0625rem solid #ddd;
    border-radius: 0.2rem;
    background-color: #fff;
    min-width: 1.25rem;
    padding: 0.3125rem 0.5rem;
    font-size: 0.8125rem;
    color: #222;
    margin: 0 0.3125rem 0.3125rem 0;
  }
  .sortItem li.activeSpec {
    color: red;
    border: 0.0625rem solid red;
    border-radius: 0;
  }
  .inputNumber {
    font-size: 1rem;
    padding: 0.6rem 0.6rem;
  }
  .sortItem .stock {
    text-align: right;
  }
  .remarks-bar {
    margin: 0.625rem 0;
    background: #fff;
    padding: 0.3125rem 0.625rem;
    border-top: 0.0625rem solid #e1e1e1;
    border-bottom: 0.0625rem solid #e1e1e1;
    text-align: left;
  }
  .remarks-box {
    padding-top: 0;
    border: 0;
    display: flex;
  }
  .remarks-box span {
    font-size: 0.825rem;
    color: #81838e;
    line-height: 0.9375rem;
    margin-right: 0.625rem;
    line-height: 1.93rem;
  }
  .view-content img {
    width: 100%;
    margin: 0.625rem 0;
    vertical-align: middle;
  }
  .evaluate-box {
    margin: 0.625rem 0;
    background: #fff;
    padding: 0.75rem 0.625rem;
    border-top: 0.0625rem solid #e1e1e1;
    border-bottom: 0.0625rem solid #e1e1e1;
  }
  .user-evaluate {
    padding: 0 0 8px 0;
    border-bottom: 1px solid #ededed;
    margin-bottom: 8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
  }
  .user-icon img {
    width: 1.25rem;
    margin-right: 0.3125rem;
    display: block;
  }
  .user-name {
    flex: 1;
    text-align: left;
  }
  .evaluate-time {
    float: right;
    font-size: 0.75rem;
    color: #999;
  }
  .comment-item-star {
    width: 4.6875rem;
    height: 0.6875rem;
    margin-top: 0.3125rem;
    margin-bottom: 0.3125rem;
    background: url(../assets/evaluate/comment-star.png) repeat-x 0 -0.6875rem;
    background-size: 0.9375rem 1.375rem;
    text-align: left;
  }
  .evaluate-text {
    line-height: 1.4rem;
    color: #454545;
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: left;
  }
  .comment-img img {
    margin-right: 0.5625rem;
    width: 3.8rem;
    height: 3.8rem;
    background: no-repeat 50%;
    background-size: cover;
  }
  .footBar {
    bottom: 0;
    height: 3rem;
    background-color: #f7f7fa;
    border-top: 0.0625rem solid #c0bfc4;
    display: flex;
    z-index: 7;
  }
  .home {
    width: 18%;
  }
  .cart {
    width: 18%;
  }
  .add-to-cart {
    width: 32%;
    background-color: #ffb03f;
    line-height: 3rem;
    font-size: 0.9375rem;
    color: #fff;
  }
  .buy-now {
    width: 32%;
    background-color: #e21323;
    line-height: 3rem;
    font-size: 0.9375rem;
    color: #fff;
  }
  .img-foot {
    margin-top: 0.34rem;
    width: 1.375rem;
    height: 1.375rem;
  }
  .footBar p {
    margin-top: 0;
    font-size: 0.625rem;
    color: #666;
  }
  .mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    background-color: #606266;
    background: rgba(0, 0, 0, 0.8);
  }
  .dialog {
    position: fixed;
    left: 0;
    right: 0;
    top: 45%;
    bottom: 0;
    z-index: 11;
    background: #fff;
    padding: 0.63rem 0.94rem;
  }
  .dialog-head {
    display: flex;
    justify-content: space-around;
    padding: 0.63rem 0;
  }
  .dialog-head img {
    margin-top: -2rem;
    width: 5rem;
    height: 5rem;
    border-radius: 0.25rem;
    border: 0.1rem solid #fcfcfc;
    box-shadow: 0.06rem 0.06rem 0.63rem #797e80;
  }
  .dialog-title {
    display: flex;
    flex-direction: column;
  }
  .for-to {
    margin-top: 0.6rem;
    width: 100%;
    font-size: 1.125rem;
    color: #fff;
    line-height: 2.55rem;
    border-radius: 0.3125rem;
  }
</style>
<script>
  import inputNumber from "../components/inputNumber";
  export default {
    components: {
      inputNumber
    },
    data() {
      return {
        or: 0,
        value: 0,
        url: "",
        selectNav: 0,
        spec: 0,
        goodsId: 0,
        goodsPrice: "",
        mask: false,
        goods: {
          detailList: [{ price: "" }],
          prodetail: []
        },
        nav: [
          {
            flag: 1,
            name: "详情"
          },
          {
            flag: 2,
            name: "说明"
          },
          {
            flag: 3,
            name: "分享"
          }
        ],
        userIcon: require("../assets/evaluate/headimg.jpg"),
        name: "飞翔的土豆",
        time: "2017",
        commentImgList: [
          require("../assets/goodsDetails/xq1.jpg"),
          require("../assets/goodsDetails/xq2.jpg"),
          require("../assets/goodsDetails/xq3.jpg"),
          require("../assets/goodsDetails/xq4.jpg"),
          require("../assets/goodsDetails/xq5.jpg")
        ]
      };
    },
    mounted() {
      this.goodsId = this.$route.params.id;
      this.getGoods();
    },
    methods: {
      setMaskShow() {
        this.mask = !this.mask;
      },
      select(index) {
        this.selectNav = index;
      },
      specSelect(detailIndex) {
        this.spec = detailIndex;
      },
      to(page) {
        this.$router.push({
          name: page
        });
      },
      setMask(or) {
        this.mask = true;
        this.or = or;
      },
      getGoods() {
        this.$fetch("/pmall/getGoodsInfo?gid=" + this.goodsId).then(
          response => {
            if (response.status == 0) {
              this.goods = response.data.goods;
              if (
                this.goods.detailList[0].price <
                this.goods.detailList[this.goods.detailList.length - 1].price
              ) {
                this.goodsPrice =
                  this.goods.detailList[0].price +
                  " - " +
                  this.goods.detailList[this.goods.detailList.length - 1].price;
              } else if (
                this.goods.detailList[0].price ==
                this.goods.detailList[this.goods.detailList.length - 1].price
              ) {
                this.goodsPrice = this.goods.detailList[0].price;
              }
            }
          }
        );
      }
    }
  };
</script>
